@import '~styles/settings.scss';

.c-loader {
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
  height: 100%;
  width: 100%;
  position: absolute;
  top: 0;
  left: 0;
  background: rgba($white, 0.5);
  z-index: 1;

  .spinner {
    height: rem(38px);
    width: rem(38px);
    animation: rotate 1s infinite cubic-bezier(0.645, 0.045, 0.355, 1);
    border: 5px solid transparent;
    border-top-color: rgba($slate, 0.7);
    border-radius: 50%;
  }

  .message {
    margin-top: rem(10px);
    font-size: rem(14px);
    background-color: rgba($white, 0.5);
    padding: rem(5px) rem(8px);
  }
}

@keyframes rotate {
  0% { transform: rotate(0deg); }
  100% { transform: rotate(360deg); }
}
